<template>
    <footer class="footer">
        <span class="todo-count"
            >剩余<strong>{{ list.length }}</strong></span
        >
        <ul class="filters">
            <li>
                <a :class="{ selected: getSel === 'all' }" href="javascript:;" @click="clickFn('all')">全部</a>
            </li>
            <li>
                <a :class="{ selected: getSel === 'no' }" href="javascript:;" @click="clickFn('no')">未完成</a>
            </li>
            <li>
                <a :class="{ selected: getSel === 'yes' }" href="javascript:;" @click="clickFn('yes')">已完成</a>
            </li>
        </ul>
        <button class="clear-completed" @click="cleanFn">清除已完成</button>
    </footer>
</template>

<script>
export default {
    props: {
        list: Array,
        getSel: String,
    },
    methods: {
        clickFn(zt) {
            this.$emit('tabFn', zt)
        },
        cleanFn() {
            this.$emit('cleanFn')
        },
    },
}
</script>
